<template>
  <div class="login-wrap">
    <div class="login-content">
      <div class="login-content-c">
        <div class="login-icon">
          <img src="/img/login/moto-show-icon.png" />
          <div class="login-icon-text">
            <p>
              <span>嘿</span>
              <span>嗨</span>
            </p>
            <p>Moto Show</p>
          </div>
        </div>
        <div class="login-title">一个不错的管理系统框架</div>
        <div class="login-text">您可以直接输入您的管理账号和密码登录</div>
        <el-form ref="loginFormRef" class="login-form" :model="param" :rules="rules">
          <el-form-item prop="username">
            <div class="content-input">
              <img src="/img/login/phone-icon.png" />
              <el-input v-model="param.username" placeholder="手机号" maxlength="11"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="content-input">
              <img src="/img/login/password-icon.png" />
              <el-input v-model="param.password" placeholder="验证码" @keyup.enter="submitForm"></el-input>
              <p :class="remainTime == 0 ? 'activeCodetext' : 'codetext'" @click="getCode">{{ codeText }}</p>
            </div>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" :loading="btnLoading" round @click="submitForm">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { matchPhone } from '@/utils/matching'
import { AES } from '@/utils/aes'
import { GetQaCreateCode } from '@/api/user'

const param = reactive({
  username: '',
  password: ''
})
const rules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

// 路由信息
const router = useRouter()

// 获取验证码
const codeText = ref('获取验证码')
const remainTime = ref(0)
let timeInterval: any = ref()
const getCode = (): void => {
  if (remainTime.value > 0) {
    return
  }
  if (!param.username) {
    ElMessage.info('请输入手机号码')
    return
  }
  if (matchPhone(param.username)) {
    ElMessage.error('手机号码输入错误，请重新输入')
    return
  }
  remainTime.value = 60
  codeText.value = '60s后重新获取'
  timeInterval = setInterval(function () {
    if (--remainTime.value <= 0) {
      remainTime.value = 0
      clearInterval(timeInterval)
      codeText.value = '获取验证码'
      return
    }
    codeText.value = `${remainTime.value}s后重新获取`
  }, 1000)

  // 获取验证码
  GetQaCreateCode({
    mobile: AES(param.username)
  }).then((response) => {
    if (response.data.code === 0) {
      ElMessage.success('验证码获取成功')
    } else {
      ElMessage.error(response.data.msg)
    }
  })
  // .finally(() => {
  //   remainTime.value = 0
  //   codeText.value = '获取验证码'
  // })
}

// 登录
const submitForm = async () => {
  router.push({ path: '/' })
  if (!param.username.trim() && !param.password.trim()) {
    ElMessage.info('请输入用户名和验证码')
    return
  }
  if (!param.username.trim()) {
    ElMessage.info('请输入用户名')
    return
  }
  if (!param.password.trim()) {
    ElMessage.info('请输入验证码')
    return
  }
}
</script>
<style lang="scss">
.login-form .el-form-item .el-form-item__content .content-input .el-input {
  width: 190px;
}

.login-form .el-form-item .el-form-item__content .content-input .el-input .el-input__inner {
  height: 38px;
  padding: 0;
  background-color: #fff4e3;
  border: none;
  box-shadow: none;
}
</style>
<style scoped lang="scss">
@import '../../styles/common.scss';

.dioag {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(204, 200, 196, 0.5);

  .dioag-content {
    position: relative;
    top: 50%;
    left: 50%;
    width: 500px;
    max-height: 700px;
    padding: 30px 40px;
    overflow: hidden;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%);

    .dioag-close {
      position: absolute;
      top: 20px;
      right: 24px;
    }

    .dioag-content-tip {
      margin-bottom: 30px;
      text-align: center;

      p {
        margin-top: 5px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
      }
    }

    .shopList-item {
      display: flex;
      height: 80px;
      margin-bottom: 20px;
      border: 1px solid #eee;
      border-radius: 5px;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
        margin: 0 10px 0 20px;
        border-radius: 50%;
      }

      p {
        @include sinleline-ellipsis(350px);
      }
    }
  }
}

.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  // background-color: #235bae;
  background-image: url('/img/login_bg.webp');
  background-size: cover;
}

.login-content {
  width: 100%;
  height: 100%;
  padding-left: 300px;
  overflow: hidden;
}

.login-content-c {
  width: 400px;
  margin-top: 150px;
  margin-left: 130px;

  .login-icon {
    display: flex;
    align-items: center;

    img {
      width: 40px;
      height: 40px;
    }

    .login-icon-text p:nth-child(1) {
      font-size: 16px;
      font-weight: bold;

      span {
        margin-right: 10px;
        margin-left: 4px;
      }
    }

    .login-icon-text p:nth-child(2) {
      font-size: 12px;
      color: #d0d0d0;
    }
  }

  .login-title {
    margin-top: 60px;
    font-size: 34px;
  }

  .login-text {
    margin-top: 5px;
    margin-bottom: 140px;
    font-size: 14px;
    color: #979ca9;
  }
}

.login-form {
  .content-input {
    display: flex;
    width: 340px;
    background-color: #fff4e3;
    border-radius: 20px;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      margin-left: 20px;
    }

    .codetext {
      color: #979ca9;
    }

    .activeCodetext {
      color: #ff3c08;
    }
  }

  .el-input {
    width: 200px;
  }
}

.login-btn {
  width: 340px;
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-top: 20px;
  margin-bottom: 10px;
  background-color: #feaf38;
  border: none;
}
</style>
